<!--
 * @Author: ryo
 * @Date: 2021-11-24 10:11:53
 * @LastEditors: ryo
 * @LastEditTime: 2021-11-25 17:42:08
 * @Company: 大臣国测
 * @Description: 入口组件
 * @FilePath: \site\src\App.vue
-->
<template>
  <v-app v-scroll="handerScroll">
    <!-- header -->
    <c-header @toggleDrawer="toggleDrawer"></c-header>
    <!-- main -->
    <v-main>
      <v-progress-linear value="100" color="#ea150d"></v-progress-linear>
      <router-view />
    </v-main>
    <!-- footer -->
    <c-footer></c-footer>
    <!-- 抽屉窗口 -->
    <v-navigation-drawer
      fixed
      temporary
      v-model="drawerModel.isVisible"
      :disable-resize-watcher="true"
    >
      <v-sheet color="grey lighten-4" class="pa-4">
        <v-img
          alt="大成国测"
          contain
          src="/images/logo.png"
          transition="scale-transition"
          width="40"
          class="mx-auto"
        />

        <div class="text-center">大成国测</div>
      </v-sheet>
      <v-divider></v-divider>
      <v-list>
        <v-list-item
          v-for="link in drawerModel.links"
          :key="link.id"
          link
          :to="link.link"
          active-class="red white--text"
        >
          <v-list-item-icon>
            <v-icon>{{ link.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <!-- 浮动按钮 -->
    <v-fab-transition>
      <v-btn
        v-show="scrollerModel.isVisible"
        color="red"
        fab
        large
        dark
        bottom
        right
        fixed
        @click="$vuetify.goTo(0)"
      >
        <v-icon>mdi-chevron-up</v-icon>
      </v-btn>
    </v-fab-transition>
  </v-app>
</template>

<script>
// 组件
import CHeader from '@/components/common/Header.vue';
import CFooter from '@/components/common/Footer.vue';
// 常量或方法
import constant from '@/const';
import throttle from 'lodash/throttle';

export default {
  name: 'App',
  components: {
    CHeader,
    CFooter
  },
  data() {
    return {
      drawerModel: {
        isVisible: false,
        links: constant.common.menus
      },
      scrollerModel: {
        isVisible: false
      }
    };
  },
  methods: {
    /**
     * @description: 抽屉窗口显示状态开关
     * @param {boolean} value
     * @return {void}
     */
    toggleDrawer(value) {
      this.drawerModel.isVisible = value;
    },
    /**
     * @description: 窗口滚动事件
     * @return {void}
     */
    handerScroll: throttle(function () {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollerModel.isVisible = scrolltop > 300;
    })
  }
};
</script>
